<template>
	<!-- 导入 组件 -->
	<div style="display: inline-block;">
		<a-button
			:type="type"
			:size="size"
			plain
			icon="import"
			@click="handleImport"
		>
			{{ text }}
		</a-button>
		<!-- 用户导入对话框 -->
		<a-modal
			:title="upload.title"
			:visible.sync="upload.open"
			width="550px"
			:destroyOnClose="true"
			@cancel="handleClose"
			:keyboard="false"
			:maskClosable="false"
		>
			<a-upload-dragger
				ref="uploadRef"
				name="file"
				accept=".xlsx, .xls"
				@reject="handleErr"
				:file-list="fileList"
				action=""
        :customRequest="(file)=>{ handleUpload(file) }"
				:headers="upload.headers"
				:showUploadList="{ showPreviewIcon: false, showRemoveIcon: false }"
			>
				<p class="ant-upload-drag-icon">
					<a-icon type="inbox" />
				</p>
				<p class="ant-upload-text" style="user-select: none;">
					将文件拖到此处，或点击上传
				</p>
				<!-- <div>22--{{ resUrl }}</div> -->
				<p class="ant-upload-hint" style="user-select: none;">
					仅允许导入xls、xlsx格式文件。
				</p>
				</a-upload-dragger>
				<div slot="footer" class="dialog-footer">
					<a-button
						type="primary"
						:loading="submitLoading"
						@click="submitFileForm"
						>确 定</a-button
					>
					<a-button @click="handleClose">取 消</a-button>
				</div>
		</a-modal>
    <a-modal
      title="导入结果"
      :visible="intoResShow"
      :confirm-loading="confirmLoading"
      :footer="false"
      @cancel="intoResShow = false"
    >
      <div v-html="resText"></div>
    </a-modal>
	</div>
</template>

<script>
import Qs from 'qs'
import Vue from 'vue'
import {ACCESS_TOKEN} from '@/store/mutation-types'
import { upload as uploadApi } from '@/api/modular/main/upload.js'
export default {
	props:{
		type: {type: String,default: "danger"},  //type
		size: {type: String,default: "default"},  //size
		text: {type: String,default: "导入"},  //按钮上的文字
		url: {type: String,default: ""},  			//要上传的地址
		params: {type: Array,default(){ return [] }}   //数组，要在计算属性中转成查询字符串查询字符串
	},
	data(){
		return {
			submitLoading: false,
      confirmLoading: false,
      intoResShow: false,
      resText:'',
			fileList: [],
			resUrl:'',  //上传成功之后返回的编码
			upload: {
        open: false, //是否显示弹出层（用户导入）
        title: '', //弹出层标题（用户导入）
        isUploading: false, // 是否禁用上传
        headers: { Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN) }, //设置上传的请求头部
      }
		}
	},
	computed:{
		// 将参数转成查询字符串
		queryString(){
			let obj = {}
			this.params.forEach(item=>{
				obj[item.name] = item.value
			})
			return Qs.stringify(obj)
		}
	},
	methods:{
    handleUpload(e){
      console.log('自定义上传',e)
      let {file, fileList} = e
			this.fileList = []
			this.fileList.push(file)
    },
		handleClose(){
			this.upload.open = false
			this.fileList = []
		},
		handleErr(){
			this.$message.error('文件类型错误')
		},
		/** 导入按钮操作 */
		handleImport() {
			// 如果传了params过来，则根据传来的字段校验是否有未传的
			// 如果没有传params，则不校验
			this.fileList = []
			let nullArr = []
			if(this.params.length>0){
				this.params.forEach(item=>{
					if(item.value==null || item.value==undefined || item.value==''){
						nullArr.push(item.text)
					}
				})
				if(nullArr.length>0){
					return this.$message.error(`未选择 ${nullArr.join('、')}`)
				}
			}
			// 判断导入地址是否为空
			if(!this.url){
				return this.$message.error('导入地址为空')
			}
			// 打开导入弹框
			this.upload.title = '导入'
			this.upload.open = true
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			this.upload.isUploading = true
		},
		// 文件上传成功处理
		// handleFileSuccess(response, file, fileList) {
		// 	this.upload.open = false
		// 	this.upload.isUploading = false
		// 	this.$refs.uploadRef.clearFiles()
		// 	this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
		// 	this.$emit('ok')
		// },
		// 提交上传文件
		submitFileForm() {
			this.submitLoading = true
			uploadApi(this.fileList[0], this.url).then(res=>{
        this.resText = res.message
        this.intoResShow = true
        this.upload.open = false
      })
			this.submitLoading = false
		},
	},
};
</script>

<style lang="scss" scoped></style>
